<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Gorgeous Ruler</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="ruler" class="ruler">
			<div id="J_Pre" class="pre"></div>
			<div id="J_Middle" class="middle"></div>
			<div id="J_Next" class="next"></div>
		</div>
		<div id="J_Operate" class="operate" width="100" height="100">
			<i class="o-min" title="Min"></i> <i class="o-dir" title="Vertical"></i> <i class="o-close" title="Close"></i> <i class="o-change" title="Change Color"></i>
		</div>
		<span id="J_Guide" class="guide"><i id="J_GNum">100</i></span>
		<div id="J_Color" class="color">Set the gradient color and alpha: Start:<input size="7" type="text" /> <input size="7" type="text" /> End:<input size="7" type="text" /> <input size="7" type="text" /> Length: <input size="7" type="text" /> <button id="J_ChangeSure">Set</button> <button id="J_CancelSet">Cancel</button></div>
		<div id="J_MinBlock" class="min-block"><b class="o-max"></b></div>
		<canvas id="J_Canvas"></canvas>
        <script type="text/javascript" src="ruler.js" />
    </body>
</html>
